<!-- 最近聊天 -->
<template>
  <div class="recent-chat_box">
    <div class="header_serach_add">
      <chat-search @select="handleClickChat" placeholder="搜索"></chat-search>
      <div @click="handleAddGroup" class="add_btn">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="tab-list_box">
      <div
        class="tab_item"
        v-for="tab in tabList"
        :key="tab.name"
        :class="{ active: tab.name == currentName }"
        @click="handleTabClick(tab)"
      >
        {{ tab.name }}
      </div>
    </div>
    <div class="chat_list_box" v-if="recentChatList.length > 0">
      <div
        class="chat_item"
        v-for="item in recentChatList"
        :key="item.id"
        :class="{
          active: currentChatId === item.id,
          topActive: item.isTop
        }"
        :isTop="item.isTop"
        @click="handleClickChat(item)"
        v-contextmenu="{ data: item, operateList: contactContextmenu }"
      >
        <chatAvatar :content="getAvatar(item)"></chatAvatar>
        <div class="chat_content">
          <div class="innr_top">
            <span class="chat_name">{{ item.name }}</span>
            <span>{{ timeFormat(item.updated_at) }}</span>
          </div>
          <div class="innr_bottom">
            <span class="content">
              <span v-if="item.atMe" style="color: red"> [有人@我] </span>
              <span v-if="item.lastSenderName">
                {{ item.lastSenderName }}:
              </span>
              <span v-if="item.lastMessageType === 3">[文件]</span>
              <span
                class="inner_content bottom_item"
                v-else
                v-html="
                  item.last_message &&
                  item.last_message.replace('[image]', minioEndpoint_mini)
                "
              ></span>
            </span>
            <span v-if="!item.isNotice" class="circle-new_num"
              ><i class="el-icon-close-notification"></i>
            </span>
            <span
              v-if="item.unreadCount > 0 && !item.isNotice"
              class="red-circle"
            ></span>
            <span v-if="item.unreadCount > 0 && item.isNotice" class="unNum">{{
              item.unreadCount
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="empty_chat_list_box" v-else>暂无数据</div>
    <add-group ref="addGroup"></add-group>
  </div>
</template>

<script>
import { timeFormat } from "@/utils/chat"
import { mapState } from "vuex"
import chatAvatar from "../common/avatar.vue"
import chatSearch from "../common/search.vue"
import addGroup from "../dialog/addGroup.vue"
import { updateChat } from "@/api/chat"
export default {
  components: { chatAvatar, chatSearch, addGroup },
  data() {
    var _this = this
    return {
      searchValue: "",
      currentName: "全部",
      timeFormat,
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      tabList: [
        { name: "全部", count: _this.unRead },
        { name: "未读", count: _this.unRead },
        { name: "@我", count: 0 }
      ],
      // 定义联系人的右键菜单
      contactContextmenu: [
        {
          icon: "el-icon-upload2",
          text: "置顶聊天",
          click: (e, instance, hide) => {
            _this.updateChatInfo({ id: instance.id, isTop: true })
            // instance.isTop = true
            hide()
          },
          visible: (instance) => {
            return !instance.isTop
          }
        },
        {
          icon: "el-icon-download",
          text: "取消置顶",
          click: (e, instance, hide) => {
            _this.updateChatInfo({ id: instance.id, isTop: false })
            console.log(instance)
            // instance.isTop = false
            hide()
          },
          visible: (instance) => {
            return instance.isTop
          }
        },

        {
          click(e, instance, hide) {
            const { id } = instance
            _this.updateChatInfo({ id, isNotice: false })
            instance.isNotice = false
            hide()
          },
          icon: "el-icon-bell",
          text: "消息免打扰",
          visible: (instance) => {
            return instance.isNotice
          }
        },
        {
          click(e, instance, hide) {
            const { id } = instance
            _this.updateChatInfo({ id, isNotice: true })
            instance.isNotice = true
            hide()
          },
          icon: "el-icon-close-notification",
          text: "取消免打扰",
          visible: (instance) => {
            return !instance.isNotice
          }
        },
        {
          click(e, instance, hide) {
            const { id, name } = instance
            _this
              .$confirm(`确定移除${name}该聊天吗？`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              })
              .then(() => {
                _this.updateChatInfo({ id, isShow: false })
              })
              .catch(() => {})
            hide()
          },
          icon: "el-icon-delete",
          color: "red",
          text: "移除聊天",
          visible: () => {
            return true
          }
        }
      ]
    }
  },
  computed: {
    ...mapState({
      currentChatId: (state) => state.chatId,
      unRead: (state) =>
        [...state.recentTopChatList, ...state.recentChatList].filter(
          (item) => item.unreadCount > 0
        ).length,
      groupList: (state) => state.groupList
    }),
    ...mapState({
      recentChatList(state) {
        let self = this
        return state.recentChatList
        // return [...state.recentTopChatList, ...state.recentChatList].filter(
        //   (item) =>
        //     item.isShow &&
        //     (() => {
        //       if (self.currentName === "全部") return true
        //       if (self.currentName === "未读") return item.unreadCount > 0
        //       if (self.currentName === "@我") return item.atMe
        //     })()
        // )
      }
    })
  },

  methods: {
    handleClickChat(item) {
      this.currentChat = item.id
      this.$store.commit("setCurrentChat", item)
      // if (item.isGroup === false)
      //   this.$store.dispatch("getCurrentChatUserInfo", item.receiverId)
      this.$emit("selectedChat", item)
    },
    handleAddGroup() {
      this.$refs.addGroup.open()
    },
    getAvatar(chat) {
      if (chat.isGroup) {
        const curGroup = this.groupList.find(
          (item) => item.id === chat.receiverId
        )
        return curGroup ? curGroup.avatarList : chat.name
      } else {
        return chat.avatar || chat.name
      }
    },
    handleContextMenu(e, item) {},
    handleTabClick(tab) {
      this.currentName = tab.name
    },
    async updateChatInfo(params, instance) {
      const res = await updateChat(params)
      if (res) {
        this.$message.success("操作成功")
        this.$store.dispatch("getRecentChatList")
        //如果是移除操作
        if (instance && instance.id == this.currentChatId) {
          this.$store.commit("setReceiverId", "")
        }
      }
    }
  }
}
</script>
<style lang="less">
.recent-chat_box {
  width: 280px;
  display: flex;
  flex-direction: column;
  .header_serach_add {
    padding: 12px;
    display: flex;
    .add_btn {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #8f95a0;
      background: #edf0f6;
      margin-left: 10px;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .tab-list_box {
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    .tab_item {
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      background: #edf0f6;
      border-radius: 4px;
      font-size: 14px;
      color: #5c6273;
      cursor: pointer;
      &.active {
        background: rgba(var(--color-primary));
        color: #fff;
      }
    }
  }

  .chat_list_box {
    margin-top: 10px;
    flex: 1;
    background: #f8f8f8;
    overflow: auto;
    .chat_item {
      display: flex;
      padding: 16px 12px;
      cursor: pointer;
      &:hover,
      &.active {
        background: rgba(225, 230, 240, 0.6);
      }
      .chat_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 10px;
      }
      .innr_top,
      .innr_bottom {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #aaaaaa;
        .content {
          width: 190px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .bottom_item {
            white-space: nowrap;
          }
          .inner_content {
            img {
              width: 18px !important;
              height: 18px !important;
            }
          }
        }
        .unNum {
          padding: 0 5px;
          height: 16px;
          font-size: 10px;
          background-image: linear-gradient(151deg, #ff928c 0%, #ff5040 96%);
          border-radius: 8px;
          text-align: center;
          line-height: 16px;
          color: #fff;
        }
        .circle-new_num {
          display: flex;
          align-items: center;
          font-size: 16px;
        }
        .red-circle {
          display: inline-block;
          width: 6px;
          height: 6px;
          background-image: linear-gradient(151deg, #ff928c 0%, #ff5040 96%);
          border-radius: 8px;
        }
      }

      .chat_name {
        font-size: 14px;
        color: #333333;
        font-weight: 600;
      }
    }

    .topActive {
      background: rgba(225, 230, 240, 0.4);
    }
  }

  .empty_chat_list_box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    color: #8f95a0;
    height: 100%;
  }
}
</style>
